<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>销售地图</title>
  <script src="/map/echarts.min.js"></script>
  <!-- <script src="map/data.js"></script> -->
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
   <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
   <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>

   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style media="screen">
    body{margin: 0 0;background-color: #404a59;}

    #main{
      height: 940px;
    }
    @media screen and (min-width: 200px) and (max-width: 760px){
      #main{
          width: 375px;height: 700px!important;
      }
    }


  </style>
</head>
<body>
  <div id="main"></div>
  <script type="text/javascript">

  var geoCoordMap={};
  var data = [

  ];
  // var a1="成都市、杭州市、武汉市、重庆市、南京市、天津市、苏州市、西安市、长沙市、沈阳市、青岛市、郑州市、大连市、东莞市、宁波市";
  // var a2="北京市、上海市、广州市、深圳市";
  // var a3="厦门市、福州市、无锡市、合肥市、昆明市、哈尔滨市、济南市、佛山市、长春市、温州市、石家庄市、南宁市、常州市、泉州市、南昌市、贵阳市、太原市、烟台市、嘉兴市、南通市、金华市、珠海市、惠州市、徐州市、海口市、乌鲁木齐市、绍兴市、中山市、台州市、兰州市";
  // var a4="潍坊市、保定市、镇江市、扬州市、桂林市、唐山市、三亚市、湖州市、呼和浩特市、廊坊市、洛阳市、威海市、盐城市、临沂市、江门市、汕头市、泰州市、漳州市、邯郸市、济宁市、芜湖市、淄博市、银川市、柳州市、绵阳市、湛江市、鞍山市、赣州市、大庆市、宜昌市、包头市、咸阳市、秦皇岛市、株洲市、莆田市、吉林市、淮安市、肇庆市、宁德市、衡阳市、南平市、连云港市、丹东市、丽江市、揭阳市、延边朝鲜族自治州、舟山市、九江市、龙岩市、沧州市、抚顺市、襄阳市、上饶市、营口市、三明市、蚌埠市、丽水市、岳阳市、清远市、荆州市、泰安市、衢州市、盘锦市、东营市、南阳市、马鞍山市、南充市、西宁市、孝感市、齐齐哈尔市";
  // var a5="乐山市、湘潭市、遵义市、宿迁市、新乡市、信阳市、滁州市、锦州市、潮州市、黄冈市、开封市、德阳市、德州市、梅州市、鄂尔多斯市、邢台市、茂名市、大理白族自治州、韶关市、商丘市、安庆市、黄石市、六安市、玉林市、宜春市、北海市、牡丹江市、张家口市、梧州市、日照市、咸宁市、常德市、佳木斯市、红河哈尼族彝族自治州、黔东南苗族侗族自治州、阳江市、晋中市、渭南市、呼伦贝尔市、恩施土家族苗族自治州、河源市、郴州市、阜阳市、聊城市、大同市、宝鸡市、许昌市、赤峰市、运城市、安阳市、临汾市、宣城市、曲靖市、西双版纳傣族自治州、邵阳市、葫芦岛市、平顶山市、辽阳市、菏泽市、本溪市、驻马店市、汕尾市、焦作市、黄山市、怀化市、四平市、榆林市、十堰市、宜宾市、滨州市、抚州市、淮南市、周口市、黔南布依族苗族自治州、泸州市、玉溪市、眉山市、通化市、宿州市、枣庄市、内江市、遂宁市、吉安市、通辽市、景德镇市、阜新市、雅安市、铁岭市、承德市、娄底市";
  // var a6="克拉玛依市、长治市、永州市、绥化市、巴音郭楞蒙古自治州、拉萨市、云浮市、益阳市、百色市、资阳市、荆门市、松原市、凉山彝族自治州、达州市、伊犁哈萨克自治州、广安市、自贡市、汉中市、朝阳市、漯河市、钦州市、贵港市、安顺市、鄂州市、广元市、河池市、鹰潭市、乌兰察布市、铜陵市、昌吉回族自治州、衡水市、黔西南布依族苗族自治州、濮阳市、锡林郭勒盟、巴彦淖尔市、鸡西市、贺州市、防城港市、兴安盟、白山市、三门峡市、忻州市、双鸭山市、楚雄彝族自治州、新余市、来宾市、淮北市、亳州市、湘西土家族苗族自治州、吕梁市、攀枝花市、晋城市、延安市、毕节市、张家界市、酒泉市、崇左市、萍乡市、乌海市、伊春市、六盘水市、随州市、德宏傣族景颇族自治州、池州市、黑河市、哈密市、文山壮族苗族自治州、阿坝藏族羌族自治州";
  // var a7="天水市、辽源市、张掖市、铜仁市、鹤壁市、儋州市、保山市、安康市、白城市、巴中市、普洱市、鹤岗市、莱芜市、阳泉市、甘孜藏族自治州、嘉峪关市、白银市、临沧市、商洛市、阿克苏地区、海西蒙古族藏族自治州、大兴安岭地区、七台河市、朔州市、铜川市、定西市、迪庆藏族自治州、日喀则市、庆阳市、昭通市、喀什地区、怒江傈僳族自治州、海东市、阿勒泰地区、平凉市、石嘴山市、武威市、阿拉善盟、塔城地区、林芝市、金昌市、吴忠市、中卫市、陇南市、山南市、吐鲁番市、博尔塔拉蒙古自治州、临夏回族自治州、固原市、甘南藏族自治州、昌都市、阿里地区、海南藏族自治州、和田地区、克孜勒苏柯尔克孜自治州、海北藏族自治州、那曲地区、玉树藏族自治州、黄南藏族自治州、果洛藏族自治州、三沙市";
  //
  // var all55= a1.split("、").concat(a2.split("、")).concat(a3.split("、")).concat(a4.split("、")).concat(a5.split("、")).concat(a6.split("、")) ;
  //
  // console.log(a1.split("、"));
  // console.log(a2.split("、"));
  // console.log(a3.split("、"));
  // console.log(a4.split("、"));
  // console.log(a5.split("、"));
  // console.log(a6.split("、"));
  // console.log(a7.split("、"));


  //全部
  axios.get('/bbex/areaSell/findAll')
  .then(function(response1){

    response1.data.data.forEach(itemAll=>{
      geoCoordMap[itemAll.areaName]=itemAll.center.split(",");
    })

    //根据data得到每个data中城市的坐标
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value)
                });
            }
        }
        return res;
    };

              //已售区域
			axios.get('/bbex/areaSell/findSold')
            .then(function(response){

                    response.data.data.forEach(item=>{
                      data.push({
                        name: item.areaName,
                        value: item.sellPriceLong/10000,
                      })
                    })
                    // console.log(response.data.data);
                    // console.log(convertData(data));

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                //设置一些可选的参数
              var option = {
                  //设置背景颜色
                  backgroundColor: '#404a59',
                  //设置图片标题、子标题、文本颜色等等
                  title: {
                      text: `剩余 【${338-response.data.data.length}】 个城市没有被点亮`,
                      subtext: '',
                      left: 'center',
                      top:'10%',
                      textStyle: {
                          color: '#fff'
                      }
                  },
                  legend: {
                        orient: 'vertical',
                        y: 'bottom',
                        x:'right',
                        data:['pm2.5'],
                        textStyle: {
                            color: '#fff'
                        }
                    },
                  tooltip : {
                      trigger: 'item',
                      show:false,
                  },
                  geo: {
                        map: 'china',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#111'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                            }
                        },
                        regions:[{
                          name:'广东',
                          selected: false,
                          itemStyle:{
                            areaColor: '#2a333d',
                          }
                        }]
                    },
                  //series就是要绘制的地图的主体。是一个数组，也就是说可以有多个数据进行绘制。这里有两个，一个是两个城市的连线，一个是对两个城市进行高亮显示。其中的type是很重要的参数，主要有饼图、条形图、线、地图等等。具体的可以去参考官网上的配置手册。
                  series :
                  [
                     {
                         name: 'Top 5',
                         type: 'effectScatter',
                         coordinateSystem: 'geo',
                         data: convertData(data),
                         symbolSize: function (val) {
                             return val[2] / 10;
                         },
                         showEffectOn: 'render',
                         rippleEffect: {
                             brushType: 'stroke'
                         },
                         hoverAnimation: true,
                         label: {
                             normal: {
                                 formatter: '{b}',
                                 position: 'right',
                                 show: true
                             }
                         },
                         itemStyle: {
                             normal: {
                                 color: '#f4e925',
                                 shadowBlur: 10,
                                 shadowColor: '#333'
                             }
                         },
                         zlevel: 1,
                         emphasis:{
                           label:{
                             show:false
                           }
                         }
                     },
                  ]
                };


                myChart.setOption(option);


            })
            .catch(function(error){
                console.log(error);
            });


  })
  .catch(function(error1){
      console.log(error1);
  });











      // 使用刚指定的配置项和数据显示图表。




</script>
</body>
</html>
